<template>
  <view class="step-affirm">
    <view class="affirm-car">
      <view class="tit">{{ props.carinfo.name }}({{ props.carinfo.plate_number }})</view>
      <view class="label">{{ props.shopinfo.name }}</view>
    </view>
    <Cell dot title="联系人姓名">
      <input v-model="useDefVal.contactPerson" placeholder="请输入联系人姓名" />
      <!-- <text>{{ userStore.userInfo.username }}</text> -->
    </Cell>
    <Cell dot title="联系人电话">
      <input v-model="useDefVal.phone" placeholder="请输入联系人电话" type="number"/>
      <!-- <text>{{ userStore.userInfo.mobile }}</text> -->
    </Cell>
    <Cell dot rightArrow title="行驶里程" @click="chooseDistance = true">
      <image v-if="useDefVal.usedKm" class="icon-wh" :src="getImageSrc('static/icons/icon-shandian.png')"></image>
      <text v-if="useDefVal.usedKm">{{ useDefVal.usedKm }}</text>
      <text v-if="!useDefVal.usedKm" style="color: #999999;">请选择行驶里程</text>
    </Cell>
    <Cell dot title="服务类型">
      <CheckBox :list="[{ value: 'maintenance', label: '保养' }, { value: 'other', label: '维修' }]"
        v-model:value="useDefVal.appointType"></CheckBox>
    </Cell>
    <Cell dot rightArrow title="预约到店时间" @click="chooseDay = true">
      <image class="icon-wh" :src="getImageSrc('static/icons/icon-rili.png')"></image>
      <text>{{ useDefVal.appointTime }}</text>
    </Cell>
  </view>
  <ChooseDistance v-model:show="chooseDistance" title="选择车辆" v-model:current="useDefVal.usedKm"></ChooseDistance>
  <ChooseRili v-model:show="chooseDay" title="预约到店时间" v-model:current="useDefVal.appointTime"></ChooseRili>
</template>

<script setup>
import { ref } from "vue"
import Cell from "@/components/ui/cell"
import CheckBox from "@/components/ui/check-box"
import ChooseDistance from "../choose-distance";
import ChooseRili from "@/components/tool/choose-rili"
import { useValue } from "@/path/hooks/v-model"
import { getImageSrc } from '@/path/until';
const emit = defineEmits(['update:value'])
const props = defineProps({
  value: Object,
  carinfo: Object,
  shopinfo: Object,
})
const chooseDistance = ref(false)
const chooseDay = ref(false)
const { useDefVal } = useValue(props, emit)

</script>

<style lang="less" scoped>
@import url(./index.less);
</style>
